<style lang='scss' scoped>
  .regist{
    position: relative;
    margin: 58px auto 102px auto;
    width:500px;
    height:70px;
    font-size:50px;
    color:rgba(0,0,0,0.87);
    line-height:70px;
    text-align: center;
  }

  .regist-input-item{
    margin: 0 auto;
    margin-bottom: 19px;
  }

  .regist-qrcode{
    clear: both;
    position: relative;
    width: 200px; height: 200px;
    margin: 12px auto 0 auto;
    background: #ccc;
  }

  .qrcode-text{
    color:rgba(48,54,65,1);
    line-height:21px;
    font-size: 15px;
    margin: 41px auto 11px auto;
  }

  .qrcode-tip{
    color:#9B9B9B;
    line-height:12px;
    font-size: 12px;
    margin: 0 auto 30px auto;
  }

  .regist-btn{
    width:300px;
    height:50px;
    background:rgba(48,54,65,1);
    border-radius:3px;
    margin: 0 auto;
    margin-bottom: 150px;
    font-size:15px;
  }

  .text{
    width:100%;
    height:17px;
    text-align: center;
    font-size:12px;
    font-family:PingFangSC-Light;
    color:rgba(155,155,155,1);
    line-height:17px;
    margin-bottom: 30px;
  }

  .regist-name{
    margin: 30px auto 80px auto;
    height:28px;
    font-size:20px;
    color:rgba(155,155,155,1);
    line-height:28px;
  }

  .regist-wait-box{
    /*width: 186px; height: 186px;*/
    margin: 0 auto;
    /*border: 1px solid #ccc;*/
  }

  .registBtn{
    width:200px;
    height:45px;
    background:rgba(255,255,255,1);
    border-radius:5px;
    border:1px solid rgba(57,184,102,1);
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    color: #39B866;
    margin-top: 57px;
    margin-bottom: 126px;
  }

  .loginBtn{
       @extend .registBtn;
        border:1px solid rgba(150,150,150,1);
        color: #303641;margin-bottom: 28px;
  }
</style>
<template>
  <section class='m-page'>
    <x-head regist />

    <!-- 登录扫码 -->
    <template v-if="1">
      <div class="regist" style="margin-bottom: 131px;" @click="hardcodeLogin">商户登录(点击不扫码直接登录)</div>
      <div class="regist-wait-box" id="wxDom"></div>
      <div class="qrcode-text">微信扫码登录</div>
      <div class="qrcode-tip" style="margin-bottom: 131px;">动态二维码，10分钟内有效</div>
    </template>

    <!-- 登录扫码成功 正在登录。。。 -->
    <template v-else-if="0">
      <div class="regist" style="margin-bottom: 131px;">商户登录</div>
      <div class="regist-wait-box"></div>
      <div class="qrcode-text green">扫码成功，正在登录…</div>
      <div class="qrcode-tip" style="margin-bottom: 131px;">动态二维码，10分钟内有效</div>
    </template>

     <!-- 二维码过期失效，刷新 -->
    <template v-else-if="0">
      <div class="regist" style="margin-bottom: 131px;">商户登录</div>
      <div class="regist-wait-box"></div>
      <button class="loginBtn">二维码过期失效，刷新</button>
      <div class="qrcode-tip" style="margin-bottom: 131px;">请点击刷新二维码后再试一次</div>
    </template>

    <!-- 登录失败，再试一次 -->
    <template v-else-if="0">
      <div class="regist" style="margin-bottom: 131px;">商户登录</div>
      <div class="regist-wait-box"></div>
      <button class="loginBtn">登录失败，再试一次</button>
      <div class="qrcode-tip" style="margin-bottom: 131px; width: 196px; line-height: 17px;">您还未注册商户账号，请开通商户； 或 联系商户管理员开通绑定子管理员</div>
    </template>


    <div class="text">温馨提示：子管理员无需注册，扫码即可登录</div>
  </section>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    data () {
      return {
      }
    },

    components: {},

    computed: {
      ...mapState({
        loginList: state => state.login.loginList,

      })
    },

    mounted () {
      if (this.getUrlParam()['code']) {
          if (localStorage.getItem('codepath') == '/'){
            this.login(this.getUrlParam()['code'])
          }
      } else{
        this.wxLogin()
      }
    },

    methods: {
      ...mapActions([
          'getLoginList',
          'getWxInfo'
      ]),
      getUrlParam: function () {
        var params = {};
        var str = location.href; //取得整个地址栏
        var num = str.indexOf("?");
        str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

        var arr = str.split("&"); //各个参数放到数组里
        for (var i = 0; i < arr.length; i++) {
          num = arr[i].indexOf("=");
          if (num > 0) {
            var name = arr[i].substring(0, num);
            var value = arr[i].substr(num + 1);
            params[name] = value
          }
        }
        return params
      },
      wxLogin (){
        localStorage.setItem('codepath','/')
        var obj = new WxLogin({
          id: "wxDom",
          appid: "wxe2ff3ac2028a6376",
          scope: 'snsapi_login',
          redirect_uri: window.encodeURI('http://test.shop.51artx.com/artx/shop/dist/#/')
        })
      },
      login (code) {
        localStorage.setItem('codepath','');
        this.getWxInfo({code:code})
          .then(data => {
              let params = {
                action: 'getloginlist',
                openid:data.result.openid
//                openid: '1008610086'
              }
            this.getLoginList(params)
              .then(data => {
                var adminList = data.result.admin || [];
                var subList = data.result.sub || [];
                if(adminList.length > 0  || subList.length > 0){
                  this.$router.push('/login/shopAdmin')
                }else{

                }

              })
          })

      },
      hardcodeLogin() {
          let params = {
            openid: 'oS4RE0aelxKg2YNj5fZTjrlHjHkQ',
            action: 'getloginlist'
          }
        this.getLoginList(params)
          .then(data => {
            var adminList = data.result.admin || [];
            var subList = data.result.sub || [];
            if(adminList.length > 0  || subList.length > 0){
              this.$router.push('/login/shopAdmin')
            }else{

            }

          })
      }
    }
  }

</script>

